<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>纯 CSS3 3D 卡片翻转动画DEMO演示</title>
  <link rel='stylesheet' href='bootstrap.min.css'>
  <link rel='stylesheet' href='https://unicons.iconscout.com/release/v2.1.9/css/unicons.css'><link rel="stylesheet" href="style.css">

</head>
<body>
<!-- partial:index.partial.html -->	

	<div class="section over-hide">
		<div class="container">
			<div class="row full-height justify-content-center">
				<div class="col-12 text-center align-self-center py-5">
					<div class="section text-center py-5 py-md-0">
			          	<input class="pricing" type="checkbox" id="pricing" name="pricing"/>
			          	<label for="pricing"><span class="block-diff">kayaking<span class="float-right">camping</span></span></label>
						<div class="card-3d-wrap mx-auto">
							<div class="card-3d-wrapper">
								<div class="card-front">
									<div class="pricing-wrap">
										<h4 class="mb-5">Kayaking</h4>
										<h2 class="mb-2"><sup>$</sup>39 / 4<sup>hrs</sup></h2>
										<p class="mb-4">per person</p>
										<p class="mb-1"><i class="uil uil-location-pin-alt size-22"></i></p>
										<p class="mb-4">Drina, Serbia</p>
										<a href="#0" class="link">Choose Date</a>
										<div class="img-wrap img-2">
											<img src="images/sea.png" alt="">
										</div>
										<div class="img-wrap img-1">
											<img src="images/kayak.png" alt="">
										</div>
										<div class="img-wrap img-3">
											<img src="images/water.png" alt="">
										</div>
										<div class="img-wrap img-6">
											<img src="images/Stone.png" alt="">
										</div>
			      					</div>
			      				</div>
								<div class="card-back">
									<div class="pricing-wrap">
										<h4 class="mb-5">Camping</h4>
										<h2 class="mb-2"><sup>$</sup>29 / 8<sup>hrs</sup></h2>
										<p class="mb-4">per person</p>
										<p class="mb-1"><i class="uil uil-location-pin-alt size-22"></i></p>
										<p class="mb-4">Tara, Serbia</p>
										<a href="#0" class="link">Choose Date</a>
										<div class="img-wrap img-2">
											<img src="images/grass.png" alt="">
										</div>
										<div class="img-wrap img-4">
											<img src="images/camp.png" alt="">
										</div>
										<div class="img-wrap img-5">
											<img src="images/Ivy.png" alt="">
										</div>
										<div class="img-wrap img-7">
											<img src="images/IvyRock.png" alt="">
										</div>
			      					</div>
			      				</div>
			      			</div>
			      		</div>
			      	</div>
		      	</div>
	      	</div>
	    </div>
	</div>
<!-- partial -->
  <script  src="script.js"></script>
<div style="text-align:center;clear:both;">
<script src="/gg_bd_ad_720x90.js" type="text/javascript"></script>
<script src="/follow.js" type="text/javascript"></script>
</div>

</body>
</html>
